import React from 'react';
import './horizontal_3.css'

class Horizontal_3 extends React.Component {
    constructor(props){
        super(props);
        this.state={
            eid:props.eid,
            maxTopHeight:'0',
            maxBottomHeight:'0'
        }
        this.rdCss=this.rdCss.bind(this);
        this.updateData=this.updateData.bind(this);
    }

    componentDidMount(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        this.updateData();

    }

    updateData(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        let maxTopHeight=0;
        let maxBottomHeight=0;

        if(datainfo!=null&&datainfo.length>0) {

            datainfo.map((item, i) => {
                if (i % 2 == 0) {

                    let topDivClass=".timeline-data-"+eid+" .a_"+i+" .count_0";
                    let topDiv=document.querySelector(topDivClass);
                    let topHeight=parseInt(Number(this.rdCss(topDiv, 'height')));
                    if(parseInt(topHeight)>parseInt(maxTopHeight)){
                        maxTopHeight=topHeight;
                    }

                } else {

                    let bottomDivClass=".timeline-data-"+eid+" .a_"+i+" .count_1";
                    let bottomDiv=document.querySelector(bottomDivClass);
                    let bottomHeight=parseInt(Number(this.rdCss(bottomDiv, 'height')));
                    if(parseInt(bottomHeight)>parseInt(maxBottomHeight)){
                        maxBottomHeight=bottomHeight;
                    }
                }

            })
        }
        this.setState({maxTopHeight:parseInt(maxTopHeight)+50,maxBottomHeight:maxBottomHeight})

    }


    componentDidUpdate(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        let maxTopHeight=0;
        let maxBottomHeight=0;

        if(datainfo!=null&&datainfo.length>0) {

            datainfo.map((item, i) => {
                if (i % 2 == 0) {

                    let topDivClass=".timeline-data-"+eid+" .a_"+i+" .count_0";
                    let topDiv=document.querySelector(topDivClass);
                    let topHeight=parseInt(Number(this.rdCss(topDiv, 'height')));
                    if(parseInt(topHeight)>parseInt(maxTopHeight)){
                        maxTopHeight=topHeight;
                    }

                } else {

                    let bottomDivClass=".timeline-data-"+eid+" .a_"+i+" .count_1";
                    let bottomDiv=document.querySelector(bottomDivClass);
                    let bottomHeight=parseInt(Number(this.rdCss(bottomDiv, 'height')));
                    if(parseInt(bottomHeight)>parseInt(maxBottomHeight)){
                        maxBottomHeight=bottomHeight;
                    }
                }

            })
        }
        let topHeight=parseInt(maxTopHeight)+50;
        let maxHeight=parseInt(topHeight)+parseInt(maxBottomHeight)+80;
        let maxHeigthClass=".timeline-horizontal-3-"+eid+" .timeline";
        let topHeightClass="timeline-data-"+eid+" horizontal_3";
        document.styleSheets[0].addRule(maxHeigthClass,'height:'+(parseInt(maxHeight))+'px !important');
        document.styleSheets[0].addRule(topHeightClass,'height:'+(parseInt(topHeight))+'px !important');

    }

    rdCss() {
        var obj = arguments[0];
        var options = arguments[1];
        if (!!obj === false || typeof options === 'undefined') {
            return null;
        }
        if (typeof options === 'string') {
            let res = document.defaultView.getComputedStyle(obj, null)[options];
            res = Number(res.replace('px', ''));
            return res;
        }
        if (typeof options === 'object') {
            for (var i in options) {
                obj.style[i] = options[i];
            }
        }
    }


    render(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        let {maxTopHeight,maxBottomHeight}=this.state;


        let bStyle={width:'20px',height:'20px',position:'absolute',top:'0',right:'0',left:'-6px'};
        let rightStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'20px solid #adadad'};
        let leftStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'10px solid white'};


        let topHeight=maxTopHeight;
        let bottomHeight=maxBottomHeight;
        let maxHeight=parseInt(topHeight)+parseInt(bottomHeight)+80

        if(maxHeight<180){
            maxHeight=180;
        }
        if(topHeight<90){
            topHeight=90
        }
        let eventsWidth=0;
        let style
        if(datainfo!=null&&datainfo.length>0){

            eventsWidth=(datainfo.length)*160+150;
            style={width:'20px',height:'20px',left:eventsWidth,top:'-25px'};
        }


        return<div className={"timeline-horizontal-3 timeline-horizontal-3-"+eid}>
                { datainfo!=null&&datainfo.length>0?
                    <div className="timeline" style={{height:maxHeight}}>
                        <div className={"timeline-data timeline-data-"+eid}>
                            <div className="horizontal_3" style={{width:eventsWidth,top:topHeight}}>
                                <ol>
                                {
                                    datainfo.map((item,i)=>{

                                    let timelinedata=item.timeline;
                                    let contentdata=item.content;
                                    let contentArr=contentdata.split(/\n/g);
                                    let timelineArr=timelinedata.split(/\n/g);

                                    const leftWidth=160*(i)+50;
                                    let count=0;
                                    i%2==1?count=1:'';
                                    return <li>
                                                <a href="#0" style={{left:leftWidth}} className={"num_"+i%4+" a_"+i}  data-date={item.timeline} >
                                                    <div>
                                                        <div className={"count_"+count} style={{borderRadius:'2px',paddingLeft:'6px',paddingRight:'6px'}}>
                                                            <div style={{fontWeight:'bold'}}>{timelinedata}</div>
                                                            <div>
                                                                {
                                                                    contentArr.map((item,i)=>{
                                                                    if(item==""){
                                                                        return <div style={{height:'20px'}}></div>
                                                                    }
                                                                    return <div>{item}</div>
                                                                    })
                                                                }
                                                            </div>
                                                        </div>
                                                        <div  className={"arrow-bottom arrow-box num_"+count}>
                                                            <b class="bottom"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b>
                                                        </div>
                                                        <div className={"arrow-top arrow-box num_"+count}>
                                                            <b class="top"><i class="top-arrow1"></i><i class="top-arrow2"></i></b>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                    })
                                }
                                </ol>
                                <span className="filling-line" aria-hidden="true"></span>
                                <div style={style}>
                                    <b className="right-2" ><i className="right-arrow1-2" ></i><i className="right-arrow2-2"></i></b>
                                </div>
                            </div>
                        </div>
                    </div>
                    :
                    <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                }
    </div>

    }

}
export default Horizontal_3;